<template>
  <div class="page-building">
    <div class="title">
      <span class="strong">后台首页</span>
      <span>欢迎使用悦兴物业综合服务平台</span>
    </div>
    <div class="top">
      <div class="left">
        <!-- 地图图表 -->
        <div ref="map" style=" width: 100%; height:100% " />
      </div>
      <div class="right">
        <!-- 折线图表 -->
        <div ref="broken" style=" width: 100%; height:100% " />
      </div>
    </div>
    <div class="bottom">
      <div class="one">
        <!-- 柱状图表 -->
        <div ref="bar" style=" width: 100%; height:100% " />
      </div>
      <div class="two">
        <!-- 饼形图表 -->
        <div ref="pie" style=" width: 100%; height:100% " />
      </div>
      <div class="three">
        <!-- 雷达图图表 -->
        <div ref="radar" style=" width: 100%; height:100% " />
      </div>
    </div>
  </div>
</template>

<script>
import '@/utils/china'
function randomData() {
  return Math.round(Math.random() * 1000)
}
import * as echarts from 'echarts'
import axios from 'axios'

// import 'https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=100000_full'
export default {
  data() {
    return {
      mapData: {}, // 存放地图的数据
      complaintData: {}, // 存放投诉管理的数据
      pieData: {}, // 存放活动管理的数据
      radarData: {} // 存放文章分类的数据
    }
  },
  watch: {
    complaintData() {
      this.broken.setOption({
        xAxis: {
          type: 'category',
          data: this.complaintData.xAxis,
          axisLabel: {
            interval: 0
          }
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.complaintData.yAxis,
            type: 'line'
          }
        ],
        title: [
          {
            left: 'center',
            text: '投诉管理'
          }
        ]
      })
      this.bar.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          data: this.complaintData.xAxis,
          axisLabel: {
            interval: 0
          }
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.complaintData.yAxis,
            type: 'bar'
          }
        ],
        title: [
          {
            left: 'center',
            text: '广告管理'
          }
        ]
      })
    },
    pieData() {
      this.pie.setOption({
        title: {
          text: '活动管理',
          // subtext: 'Fake Data',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: this.pieData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      })
    },
    radarData() {
      this.radar.setOption({
        title: {
          text: '文章分类',
          left: 'center'
        },
        radar: {
          // shape: 'circle',
          indicator: this.radarData.items
        },
        series: [
          {
            name: 'Budget vs spending',
            type: 'radar',
            data: [
              {
                value: this.radarData.view.xAxis,
                name: 'Allocated Budget'
              },
              {
                value: this.radarData.view.yAxis,
                name: 'Actual Spending'
              }
            ]
          }
        ]
      })
    },
    mapData() {
      this.map.setOption({
        title: {
          text: `${this.mapData.nowDate}各省不同姓占比`,
          left: 'left'
        },
        tooltip: {
          // trigger: 'axis'
          trigger: 'item',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          orient: 'vertical',
          right: '3%',
          bottom: '3%',
          data: this.mapData.legendData
        },
        color: this.mapData.legendColor,
        visualMap: {
          min: 0,
          max: 2500,
          left: 'left',
          bottom: '3%',
          text: ['高', '低'], // 文本，默认为数值文本
          calculable: true,
          color: this.mapData.visColor
        },
        toolbox: {
          show: true,
          right: '3%',
          feature: {
            dataView: { readOnly: false },
            restore: {},
            saveAsImage: {}
          }
        },
        series: [
          {
            name: this.mapData.legendData[0],
            type: 'map',
            map: 'china',
            label: { normal: { show: true }, emphasis: { show: true }},
            data: [
              { name: '北京', value: randomData() },
              { name: '天津', value: randomData() },
              { name: '上海', value: randomData() },
              { name: '重庆', value: randomData() },
              { name: '河北', value: randomData() },
              { name: '河南', value: randomData() },
              { name: '云南', value: randomData() },
              { name: '辽宁', value: randomData() },
              { name: '黑龙江', value: randomData() },
              { name: '湖南', value: randomData() },
              { name: '安徽', value: randomData() },
              { name: '山东', value: randomData() },
              { name: '新疆', value: randomData() },
              { name: '江苏', value: randomData() },
              { name: '浙江', value: randomData() },
              { name: '江西', value: randomData() },
              { name: '湖北', value: randomData() },
              { name: '广西', value: randomData() },
              { name: '甘肃', value: randomData() },
              { name: '山西', value: randomData() },
              { name: '内蒙古', value: randomData() },
              { name: '陕西', value: randomData() },
              { name: '吉林', value: randomData() },
              { name: '福建', value: randomData() },
              { name: '贵州', value: randomData() },
              { name: '广东', value: randomData() },
              { name: '青海', value: randomData() },
              { name: '西藏', value: randomData() },
              { name: '四川', value: randomData() },
              { name: '宁夏', value: randomData() },
              { name: '海南', value: randomData() },
              { name: '台湾', value: randomData() },
              { name: '香港', value: randomData() },
              { name: '澳门', value: randomData() }
            ]
          },
          {
            name: this.mapData.legendData[1],
            type: 'map',
            map: 'china',
            label: { normal: { show: true }, emphasis: { show: true }},
            data: [
              { name: '湖北', value: randomData() },
              { name: '广西', value: randomData() },
              { name: '甘肃', value: randomData() },
              { name: '山西', value: randomData() },
              { name: '内蒙古', value: randomData() },
              { name: '陕西', value: randomData() },
              { name: '吉林', value: randomData() },
              { name: '福建', value: randomData() },
              { name: '贵州', value: randomData() },
              { name: '广东', value: randomData() },
              { name: '青海', value: randomData() },
              { name: '西藏', value: randomData() },
              { name: '四川', value: randomData() },
              { name: '宁夏', value: randomData() },
              { name: '海南', value: randomData() },
              { name: '台湾', value: randomData() },
              { name: '香港', value: randomData() },
              { name: '澳门', value: randomData() }
            ]
          },
          {
            name: this.mapData.legendData[2],
            type: 'map',
            map: 'china',
            label: {
              normal: {
                show: true
              },
              emphasis: {
                show: true
              }
            },
            data: [
              { name: '北京', value: randomData() },
              { name: '天津', value: randomData() },
              { name: '上海', value: randomData() },
              { name: '重庆', value: randomData() },
              { name: '河北', value: randomData() },
              { name: '安徽', value: randomData() },
              { name: '新疆', value: randomData() },
              { name: '浙江', value: randomData() },
              { name: '江西', value: randomData() },
              { name: '山西', value: randomData() },
              { name: '内蒙古', value: randomData() },
              { name: '吉林', value: randomData() },
              { name: '福建', value: randomData() },
              { name: '广东', value: randomData() },
              { name: '西藏', value: randomData() },
              { name: '四川', value: randomData() },
              { name: '宁夏', value: randomData() },
              { name: '香港', value: randomData() },
              { name: '澳门', value: randomData() }
            ]
          },
          {
            name: this.mapData.legendData[3],
            type: 'map',
            map: 'china',
            label: {
              normal: {
                show: true
              },
              emphasis: {
                show: true
              }
            },
            data: [
              { name: '北京', value: randomData() },
              { name: '天津', value: randomData() },
              { name: '上海', value: randomData() },
              { name: '广东', value: randomData() },
              { name: '台湾', value: randomData() },
              { name: '香港', value: randomData() },
              { name: '澳门', value: randomData() }
            ]
          }
        ]
      })
    }
  },
  mounted() {
    this.broken = echarts.init(this.$refs.broken) // 初始化折线图echarts
    this.bar = echarts.init(this.$refs.bar) // 初始化柱状图echarts
    this.pie = echarts.init(this.$refs.pie) // 初始化饼图echarts
    this.radar = echarts.init(this.$refs.radar) // 初始化雷达图echarts
    this.map = echarts.init(this.$refs.map) // 初始化地图页echarts
    // echarts.registerMap('china', { geoJSON: chinaMap })
  },
  created() {
    this.getComplaint()
    this.getPie()
    this.getRadar()
    this.getMap()
  },
  methods: {
    // 折线图数据
    async getComplaint() {
      const { data } = await axios.get('/vue-admin-template/complaint')
      console.log(data)
      this.complaintData = data.data.items
    },
    // 饼图数据
    async getPie() {
      const { data } = await axios.get('/vue-admin-template/pie')
      console.log(data)
      this.pieData = data.data.items
    },
    // 雷达数据
    async getRadar() {
      const { data } = await axios.get('/vue-admin-template/radar')
      console.log(data)
      this.radarData = data.data
    },
    // 地图数据
    async getMap() {
      const { data } = await axios.get('/vue-admin-template/map')
      console.log(data, 'map')
      this.mapData = data.data.items
    }
  }
}
</script>

<style scoped lang="scss">
.page-building{
  background-color: #f8f9fb;
  padding: 40px;
  .top{
    width: 100%;
    height: 400px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    .left{
      width: 500px;
      height: 100%;
      background-color: salmon;
    }
    .right{
      height: 100%;
      width: 500px;
      // background-color: goldenrod;
    }
  }
  .bottom{
    width: 100%;
    height: 400px;
    display: flex;
    .one{
      // background-color: seagreen;
      flex: 1;
      height: 100%;
    }
    .two{
      // background-color: khaki;
      flex: 1;
      height: 100%;
    }
    .three{
      height: 100%;
      flex: 1;
    }
  }
  .el-button{
    font-size: 14px;
  }
  .title{
    line-height: 1;
    margin-bottom: 18px;
    color: #000000a6;
    font-size: 14px;
    .strong{
      font-weight: 700;
      font-size: 20px;
      margin-right: 12px;
      color: #000000e0;
    }
  }
}
</style>

